<template>
    <div>
        <!-- 二级路由 -->
        <router-view />
        <van-tabbar v-model="active" active-color="#f00" :safe-area-inset-bottom="true" @change='botcat'>
            <van-tabbar-item >
                <span>影院</span>
                <template >
                    <img :src="require(`@/assets/home/movie-${active == 0 ? 'red' : 'gray'}.png`)" slot="icon" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item>
                <span>视频</span>
                <template >
                    <img :src="require(`@/assets/home/video-${active == 1 ? 'red' : 'gray'}.png`)" slot="icon"/>
                </template>
            </van-tabbar-item>
            <van-tabbar-item>
                <span>我的</span>
                <template >
                    <img :src="require(`@/assets/home/me-${active == 2 ? 'red' : 'gray'}.png`)" slot="icon"/>
                </template>
            </van-tabbar-item>

        </van-tabbar>
    </div>
</template>

<script>
 var name=['/home/movie','/home/video','/home/me']
export default {
    mounted() {
        var laiurl=this.$route.path
        console.log(laiurl)
        name.forEach( (res,index)=>{
            if(laiurl==res){
                this.hahs(index)
            }
        })
    },
  data() {
    return {
      active: 0,
      icon: [0]
    };
  },
  methods: {
      botcat(e) {
        console.log(name[e])
        this.$router.push(name[e])
        
      },
      hahs(f){
          this.active=f
      }
  },
};
</script>

<style lang="scss" scoped>
</style>